<template>
  <div style="margin-top: 50px">
    <h1 style="text-align: center">修改密码</h1>

    <el-form :model="updateForm" ref="updateForm" style="margin-left: 480px" :rules="rules">
      <el-form-item label="请输入旧密码" prop="code" style="margin-top: 50px;">
        <el-input type="password" v-model="updateForm.oldPassword" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="请输入新密码" prop="code" style="margin-top: 50px">
        <el-input type="password" v-model="updateForm.newPassword" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="请确认新密码" prop="code" style="margin-top: 50px">
        <el-input type="password" v-model="updateForm.newPasswordEnter" style="width: 200px"></el-input>
      </el-form-item>
    </el-form>

    <p style="margin-top: 100px;justify-content: center;display: flex">
      <el-button type="primary" @click="update()" style="width: 100px">修改</el-button>
    </p>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "password",
  data() {
    return {
      updateForm: {},
      rules: {
        oldPassword: [
          {required: true, message: '请输入旧密码', trigger: 'blur'}
        ],
        newPassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'}
        ],
        newPasswordEnter: [
          {required: true, message: '请确认新密码', trigger: 'blur'},
        ]
      }
    }
  },
  methods: {
    update() {
      let password = ''
      axios.post('/api/user/selectPassword', null).then(response => {
        password = response.data
        if (this.updateForm.newPassword == this.updateForm.newPasswordEnter && this.updateForm.oldPassword == password) {
          let param = new URLSearchParams();
          param.append("password", this.updateForm.newPasswordEnter)
          axios.post('/api/user/updateUserPassWord', param).then(response => {
            if ("修改成功" == response.data) {
              ElMessage.success("修改成功")
              this.$refs["updateForm"].resetFields();
            } else {
              ElMessage.error("修改失败")
            }
          })
        } else {
          ElMessage.error('新密码与确认密码不一致或旧密码错误');
        }
      })
    }
  }
}
</script>

<style scoped>

</style>